﻿<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>L.M.</title>
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/media.css" rel="stylesheet" type="text/css">
<link href="css/jquery.fancybox.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="font-awesome/4.6.1/css/font-awesome.min.css">
<link href="css/owl.carousel.css" rel="stylesheet" type="text/css">
<link href="css/owl.theme.css" rel="stylesheet" type="text/css">
<link href="css/animate.css" rel="stylesheet" type="text/css">
<link href="css/jpushmenu.css" rel="stylesheet" type="text/css">
</head>
<body class="push-body">
<header id="main-navigation">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12"> <a href="#" class="navbar-brand pull-right"></a>
        <nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left"> <a href="#" class="push_nav_brand">Mann Liang</a>
          <ul class="push_nav">
            <li><a class="active scroll" href="#home">Home</a></li>
            <li><a class="scroll" href="#aboutme">About Me</a></li>
            <li><a class="scroll" href="#contactme">Contact ME</a></li>
            <!-- <li><a class="scroll" href="#mywork">My Work</a></li> -->
          </ul>
          <!-- <ul class="icons">
            <li><a href="#." class="fa"><i class="fa fa-fw fa-facebook"></i></a></li>
            <li><a href="#." class="fa"><i class="fa fa-fw fa-twitter"></i></a></li>
            <li><a href="#." class="fa"><i class="fa fa-fw fa-google-plus"></i></a></li>
            <li><a href="#." class="fa"><i class="fa fa-fw fa-linkedin"></i></a></li>
            <li><a href="#." class="fa"><i class="fa fa-fw fa-pinterest-p"></i></a></li>
          </ul> -->
        </nav>
      </div>
    </div>
  </div>
</header>
<div class="container-fluid">
  <div class="main-button left">
    <button class="toggle-menu menu-left push-body"> <span></span> <span></span> <span></span> </button>
  </div>
</div>

<!-- Info-->
<div id="home" class="row section">
  <div class="container info text-center">
    <div class="row">
      <div class="col-xs-12 text-center">
        <div class="info_detail">
          <div class="zoom"><img src="images/lm.jpg" alt="alex">
            <div class="zoom-overlay"></div>
          </div>
          <div class="markName">
            <h3>Mann Liang</h3>
            <p>Web前端开发</p>
            <p>Web front-end development</p>
          </div>
          <!-- Social Icons -->
          <div class="icons">
            <ul class="hover-wc">
              <li><a href="javascript:;" class="fa gp"><i class="fa fa-fw fa-wechat"></i></a></li>
              <li class="hover-wechat">84395599</li>
              <!-- <li><a href="#." class="fa fb"><i class="fa fa-fw fa-facebook"></i></a></li>
              <li><a href="#." class="fa tw"><i class="fa fa-fw fa-twitter"></i></a></li>
              <li><a href="#." class="fa in"><i class="fa fa-fw fa-linkedin"></i></a></li>
              <li><a href="#." class="fa pin"><i class="fa fa-fw fa-pinterest-p"></i></a></li> -->
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="button"> <a href="#contactme" data-target="contactme" class="btn active scroll" style="margin-right:15px;">Content Me</a> <a href="#aboutme" data-target="mywork" class="btn scroll">My Work</a> </div>
  </div>
</div>

<!-- About -->
<div id="aboutme" class="row section">
  <div class="container career text-center">
    <div class="row">
      <div class="col-xs-12 text-center">
        <div class="animate fadeInRight">
          <div class="heading">
            <h1>我的工作经历</h1>
            <p>My work experience.</p>
          </div>
        </div>
        <div class="col-md-12 text-center animate fadeInLeft">
          <div class="">
            <div class="item text-center">
              <h2>web前端</h2>
              <em>就职于安徽省宁国市文航广告有限公司,<span> 2014 5 - 2015 11</span></em>
              <p>主要负责公司的网站界面维护和web前端的实习。</p>
            </div>
            <div class="item text-center">
              <h2>web前端开发</h2>
              <em>就职于江苏省福华中金信息技术有限公司,<span> 2015 11 - 2017 2</span></em>
              <p>主要负责公司的网站页面切图、活动页面切图和H5页面的编写及维护。</p>
            </div>
            <div class="item text-center">
                <h2>web前端开发</h2>
                <em>就职于上海橙车网络信息技术有限公司,<span> 2017 3 - 2017 12</span></em>
                <p>主要负责公司的H5页面的开发及编写维护，前端接口的调用以及对后台返回数据的处理和项目重构。</p>
            </div>
            <div class="item text-center">
              <h2>web前端开发</h2>
              <em>就职于普洛斯金融,<span> 2018 1 - 至今</span></em>
              <p>主要负责老项目的维护和新项目的开发，用最新框架例如react和vue搭配webpack进行老项目重构和新项目开发。</p>
            </div>
          </div>
        </div>
        <div class="col-xs-12 skills text-center">
          <div class="animate fadeInRight">
            <div class="heading">
              <h1>我的技能</h1>
              <p>My Skills - Photoshop. HTML CSS JS HTML5 CSS3. Webpack.</p>
            </div>
          </div>
          <div class="animate bounceInUp">
            <div class="circle">
              <div class="circle_detail active">
                <div class="myStat" data-dimension="250" data-text="90%" data-fontsize="18" data-percent="90" data-fgcolor="#fff"></div>
                <h3>Vue&React</h3>
                <p>理解Js和主流Js框架，能够很好的运用框架配合webpack构建出公司需要的最优项目代码。</p>
              </div>
              <div class="circle_detail">
                <div class="myStat" data-dimension="250" data-text="95%" data-fontsize="18" data-percent="95" data-fgcolor="#fff"></div>
                <h3>静态页编写</h3>
                <p>精通样式以及各类样式框架，配合UI框架写出符合UI设计图的优质前端页面。</p>
              </div>
              <div class="circle_detail">
                <div class="myStat" data-dimension="250" data-text="85%" data-fontsize="18" data-percent="85" data-fgcolor="#fff"></div>
                <h3>HTML5 & CSS3</h3>
                <p>对HTML5技术和CSS3的动画等都有深入的研究，同时也应用在项目中。</p>
              </div>
              <div class="circle_detail">
                <div class="myStat" data-dimension="250" data-text="95%" data-fontsize="18" data-percent="95" data-fgcolor="#fff"></div>
                <h3>代码编写</h3>
                <p>代码洁癖症，对于项目中所有的代码必须严格按照规范编写，界面必须有着清楚的注释以便于未来的维护。</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Work -->

<!-- <div id="mywork" class="row section">
  <div class="container-fluid work text-center">
    <div class="row">
      <div class="col-xs-12 text-center">
        <div class="animate fadeInRight">
          <div class="head">
            <h1>My Recent Work</h1>
          </div>
        </div>
        <div class="col-xs-12 work_filter text-center">
          <div class="row">
            <div class="animate fadeInLeft">
              <ul class="breadcrumb">
                <li><a href="#." class="filter active" data-filter="all">All</a></li>
                <li><a href="#." class="filter" data-filter=".brand">Branding</a></li>
                <li><a href="#." class="filter" data-filter=".design">Design</a></li>
                <li><a href="#." class="filter" data-filter=".photography">Photography</a></li>
                <li><a href="#." class="filter" data-filter=".web">Web</a></li>
              </ul>
            </div>
            <div class="gallery">
              <div class="row">
                <div class="mix web">
                  <div class="mix_sec">
                    <div class="imageContainer"> <img class="sec" src="images/work1.png" alt="work"> <a class="overlayText fancybox" href="images/work1.png"  data-fancybox-group="gallery">
                      <h4> Photo Chelenge </h4>
                      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
                      </a> </div>
                  </div>
                </div>
                <div class="mix brand">
                  <div class="mix_sec">
                    <div class="imageContainer"> <img class="sec" src="images/work2.png" alt="work"> <a class="overlayText fancybox" href="images/work2.png" data-fancybox-group="gallery">
                      <h4> Photo Chelenge </h4>
                      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
                      </a> </div>
                  </div>
                </div>
                <div class="mix design">
                  <div class="mix_sec">
                    <div class="imageContainer"> <img class="sec" src="images/work3.png" alt="work"> <a class="overlayText fancybox" href="images/work3.png"  data-fancybox-group="gallery">
                      <h4> Photo Chelenge </h4>
                      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
                      </a> </div>
                  </div>
                </div>
                <div class="mix web">
                  <div class="mix_sec">
                    <div class="imageContainer"> <img class="sec" src="images/work4.png" alt="work"> <a class="overlayText fancybox" href="images/work4.png" data-fancybox-group="gallery">
                      <h4> Photo Chelenge </h4>
                      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
                      </a> </div>
                  </div>
                </div>
                <div class="mix brand">
                  <div class="mix_sec">
                    <div class="imageContainer"> <img class="sec" src="images/work5.png" alt="work"> <a class="overlayText fancybox" href="images/work5.png"  data-fancybox-group="gallery">
                      <h4> Photo Chelenge </h4>
                      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
                      </a> </div>
                  </div>
                </div>
                <div class="mix web">
                  <div class="mix_sec">
                    <div class="imageContainer"> <img class="sec" src="images/work2.png" alt="work"> <a class="overlayText fancybox" href="images/work2.png"  data-fancybox-group="gallery">
                      <h4> Photo Chelenge </h4>
                      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
                      </a> </div>
                  </div>
                </div>
                <div class="mix photography">
                  <div class="mix_sec">
                    <div class="imageContainer"> <img class="sec" src="images/work4.png" alt="work"> <a class="overlayText fancybox" href="images/work4.png" data-fancybox-group="gallery">
                      <h4> Photo Chelenge </h4>
                      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
                      </a> </div>
                  </div>
                </div>
                <div class="mix photography">
                  <div class="mix_sec">
                    <div class="imageContainer"> <img class="sec" src="images/work5.png" alt="work"> <a class="overlayText fancybox" href="images/work5.png"  data-fancybox-group="gallery">
                      <h4> Photo Chelenge </h4>
                      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
                      </a> </div>
                  </div>
                </div>
                <div class="mix design">
                  <div class="mix_sec">
                    <div class="imageContainer"> <img class="sec" src="images/work1.png" alt="work"> <a class="overlayText fancybox" href="images/work1.png"  data-fancybox-group="gallery">
                      <h4> Photo Chelenge </h4>
                      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
                      </a> </div>
                  </div>
                </div>
                <div class="mix photography">
                  <div class="mix_sec">
                    <div class="imageContainer"> <img class="sec" src="images/work3.png" alt="work"> <a class="overlayText fancybox" href="images/work3.png"  data-fancybox-group="gallery">
                      <h4> Photo Chelenge </h4>
                      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. </p>
                      </a> </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-xs-12 title text-center">
          <div class="animate fadeInRight">
            <h1>Are You Ready to Start Your Project Now?</h1>
            <div class="getin"> <a class="scroll" href="#contactme" data-target="contactme">Get In Touch</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div> -->

<!-- contact me -->
<div id="contactme" class="row section">
  <div class="container contact">
    <div class="row">
      <div class="col-xs-12 text-center">
        <div class="animate fadeInRight">
          <div class="heading">
            <h1>Contact Me</h1>
            <p>快来联系我</p>
          </div>
        </div>
        <!-- <div class="col-md-7 col-sm-12 col-xs-12 field">
          <div class="animate bounceInLeft">
            <form>
              <div class="user">
                <input type="text" value="Name" />
                <i class="fa fa-user" aria-hidden="true"></i></div>
              <div class="user">
                <input type="text" value="Email" />
                <i class="fa fa-envelope" aria-hidden="true"></i></div>
              <textarea name="Message">Message here</textarea>
              <input type="submit" value="Submit Now" />
            </form>
          </div>
        </div> -->
        <div class="col-md-12 col-sm-20 col-xs-12 contact_info">
          <div class="animate bounceInRight">
            <h3> Get In Touch</h3>
            <div class="contact_sec">
              <ul>
                <li><i class="fa fa-home" aria-hidden="true"></i><span>Shanghai Lujiazui</span></li>
                <li><i class="fa fa-phone" aria-hidden="true"></i><span>Phone: 13805626332</span></li>
                <li><i class="fa fa-envelope-o" aria-hidden="true"></i><span>Email: liangman6@163.com</span></li>
                <li><i class="fa fa-wechat" aria-hidden="true"></i><span>Wechat: 84395599</span></li>
              </ul>
            </div>
            <!-- Social Icons -->
            <!-- <div class="contact_icons">
              <ul>
                <li><a href="#." class="fa fb"><i class="fa fa-fw fa-facebook"></i></a></li>
                <li><a href="#." class="fa tw"><i class="fa fa-fw fa-twitter"></i></a></li>
                <li><a href="#." class="fa gp"><i class="fa fa-fw fa-google-plus"></i></a></li>
                <li><a href="#." class="fa in"><i class="fa fa-fw fa-linkedin"></i></a></li>
                <li><a href="#." class="fa pin"><i class="fa fa-fw fa-pinterest-p"></i></a></li>
              </ul>
            </div> -->
          </div>
        </div>
        <div class="col-xs-12 footer text-center">
          <div class="animate fadeInLeft">
            <p>Copyright &copy; 2018 Mann Liang | ShangHai</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<a href="#." class="cd-top">TOP</a> 
<!--JS File--> 

<script type="text/javascript" src="js/jquery-2.2.3.js"></script> 
<script type="text/javascript" src="js/bootstrap.min.js"></script> 
<script type="text/javascript" src="js/jquery.circliful.min.js"></script> 
<script type="text/javascript" src="js/jquery.mixitup.min.js"></script> 
<script type="text/javascript" src="js/jquery.fancybox.js"></script> 
<script type="text/javascript" src="js/waypoints.js"></script> 
<script type="text/javascript" src="js/jquery.appear.js"></script> 
<script type="text/javascript" src="js/jpushmenu.js"></script> 
<script type="text/javascript" src="js/owl.carousel.js"></script>
<script type="text/javascript" src="js/functions.js"></script>
</body>
</html>

